<template>
  <div>
    <el-dialog :visible.sync="showDialog" :fullscreen="fullscreen" :form="form" :width="width" :show-close="false"
               :append-to-body="appendToBody"
               :before-close="close" :modal-append-to-body="false" :close-on-click-modal="false" class="zero-dialog">
      <div slot="title" class="zero-dialog__title">
        <span class="zero-dialog__span"></span>
        <span> {{ title }}</span>
        <span style="float:right;">
          <el-row :gutter="15">
            <el-col :span="12">
              <el-button size="mini" circle @click="fullscreenFun">
                <svg-icon :icon-class="fullscreen ? 'exit-fullscreen' : 'fullscreen'"/>
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button size="mini" circle icon="el-icon-close" @click="close"/>
            </el-col>
          </el-row>
        </span>
      </div>
      <slot name="body"/>
      <div slot="footer">
        <slot name="extra-buttons"></slot>
        <el-button v-if="submit !== null" type="primary" @click="submitFun(form)"> 确 定
        </el-button>
        <el-button @click="close"> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ZeroDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '200px'
    },
    title: String,
    form: Object,
    submit: {
      type: Function,
      default: null
    }
  },
  methods: {
    fullscreenFun() {
      // 子组件设置父组件值
      this.$emit('update:fullscreen', !this.fullscreen)
    },
    close() {
      this.$emit('update:showDialog', false)
    },
    submitFun(form) {
      this.submit(form)
    }
  }
}
</script>
<style>
.zero-dialog .el-dialog__header {
  padding: 0 !important;
}

.zero-dialog__title {
  font-size: 1.1em;
  padding: 9px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f8f8f8;
}

.zero-dialog__span {
  display: inline-block;
  background-color: #3478f5;
  width: 3px;
  height: 18px;
  margin-right: 5px;
}

/*
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: fixed; !* 保持fixed定位 *!
  inset: 0; !* 使用inset简写属性覆盖top, right, bottom, left，使其铺满整个视口 *!
  overflow: hidden; !* 防止内容溢出到对话框外部 *!
  max-height: 100%; !* 保持最大高度为视口高度，减去可能的边距（如果需要） *!
  max-width: 100%;
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow-y: auto; !* 仅允许垂直滚动 *!
}*/
</style>
